<template>
  <transition name="slide">
    <div class="message-wrap" :class="[type, center ? 'text-center' : '']" :style="{ ...style }" v-if="visible">
      <div class="message-box" v-if="type === 'success'">
        <svg t="1656147707636" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="8360" width="16" height="16">
          <path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#07C160" p-id="8361"></path>
          <path
            d="M466.7 679.8c-8.5 0-16.6-3.4-22.6-9.4l-181-181.1c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l158.4 158.5 249-249c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L489.3 670.4c-6 6-14.1 9.4-22.6 9.4z"
            fill="#FFFFFF" p-id="8362"></path>
        </svg>
        <div class='message'>{{ message }}</div>
      </div>
      <div class="message-box" v-else-if="type === 'error'">
        <svg t="1656147915820" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="17961" width="16" height="16">
          <path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#FA5151" p-id="17962"></path>
          <path
            d="M557.3 512l113.1-113.1c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L512 466.7 398.9 353.6c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L466.7 512 353.6 625.1c-12.5 12.5-12.5 32.8 0 45.3 6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4L512 557.3l113.1 113.1c6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4c12.5-12.5 12.5-32.8 0-45.3L557.3 512z"
            fill="#FFFFFF" p-id="17963"></path>
        </svg>
        <div class='error message'>{{ message + 'error' }}</div>
      </div>
      <div class="message-box" v-else>
        <svg t="1656147798124" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="11032" width="16" height="16">
          <path d="M512 512m-384 0a384 384 0 1 0 768 0 384 384 0 1 0-768 0Z" fill="#2196F3" p-id="11033"></path>
          <path
            d="M512 330.666667m-53.333333 0a53.333333 53.333333 0 1 0 106.666666 0 53.333333 53.333333 0 1 0-106.666666 0Z"
            fill="#FFFFFF" p-id="11034"></path>
          <path d="M469.333333 448h85.333334v298.666667h-85.333334z" fill="#FFFFFF" p-id="11035"></path>
        </svg>
        <div class='message'>{{ message }}</div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  props: {
    message: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'info',
    },
    duration: {
      type: Number,
      default: 800,
    },
  },
  data() {
    const messageArr: Array<string> = [];
    const style = {};
    return {
      messageArr,
      visible: true,
      center: true,
      style,
    };
  },
  created(): void {
    const arr = this.message.split('\n');
    if (arr.length > 1) {
      this.messageArr = arr;
    }
  },
  mounted(): void {
    this.startTimer();
  },
  methods: {
    startTimer(): void {
      const { duration } = this;
      const timer = setTimeout(() => {
        this.visible = false;
        clearTimeout(timer);
      }, duration);
    },
  },
});
</script>
<style scoped lang="less">
.message-wrap {
  position: absolute;
  top: 40px;
  background: #fff;
  border: 1px solid #cdcdcd;
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0px 4px 12px #b6b6b6;
  animation: easyIn 0.3s ease-in;

  @keyframes easyIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 100;
    }
  }

  .message-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    .message {
      color: #535353;
      margin-left: 8px;
    }
  }
}
</style>